<template>
  <div id="footer">
    <footer-left class="footer-left"/>
    <footer-slider class="slider"/>
    <footer-volume class="volume"/>
    <footer-sequence class="sequence"/>
  </div>
</template>

<script>
import types from 'utils/types.js'
import FooterLeft from './childrenCpns/FooterLeft.vue'
import FooterSlider from './childrenCpns/FooterSlider.vue'
import FooterVolume from './childrenCpns/FooterVolume.vue'
import FooterSequence from './childrenCpns/FooterSequence.vue'

export default {
  name: 'Footer',
  components: {
    FooterLeft,
    FooterSlider,
    FooterVolume,
    FooterSequence
  },
  methods: {
    playOrStop () {
      this.$store.commit(types.PLAY_OR_STOP)
      if (this.$store.getters.isPlay) {
        this.$audio.play()
      } else {
        this.$audio.pause()
      }
    }
  }
}
</script>

<style scoped lang="less">
#footer {
  display: flex;
  width: 100%;
  position: absolute;
  bottom: 0;
  height: var(--footer--height);
  background-color: #f6f6f8;
  border-top: 1px solid #e1e1e2;
  .footer-left {
    width: var(--aside--width);
  }
  .slider {
    flex: 21;
  }
  .volume {
    flex: 4;
  }
  .sequence {
    flex: 1;
  }
}
</style>
